import React, { Component } from 'react'
import { Navigate, useNavigate } from 'react-router-dom'
import '../../assets/css/iconfont.css'
import axios from 'axios'
import { Image, Space } from 'antd-mobile'

/**
 * 图片懒加载：
 *
 * 1. 占位图
 * 2. 展示图片
 *
 */

export default class index extends Component {
  state = {
    usrename: '',
    password: '',
    loginFlag: false,
  }
  render() {
    return (
      <div>
        <span className="icon iconfont icon-shouye"></span>
        <div className="name">首页</div>
        账号：
        <input
          type="text"
          value={this.state.usrename}
          onChange={(e) => {
            this.setState({ usrename: e.target.value })
          }}
        />
        密码：
        <input
          type="text"
          value={this.state.password}
          onChange={(e) => {
            this.setState({ password: e.target.value })
          }}
        />
        <button
          onClick={() => {
            axios.post('/api/login', { usrename: this.state.usrename, password: this.state.password }).then((res) => {
              console.log('res:', res)
              if (res.data.code === 0) {
                window.localStorage.setItem('token', res.data.data.token)
                this.setState({ loginFlag: true })
              }
            })
          }}
        >
          提交
        </button>
        {this.state.loginFlag ? <Navigate to={'/news'}></Navigate> : null}
      </div>
    )
  }
}
